<template>
  <div class="label-desc-wrapper">
    <div class="label" :class="{ 'label-bold': labelBold }">{{ label }}</div>

    <div class="desc-more">
      <!-- @mouseenter="isHover = true" @mouseleave="isHover = false" -->
      <div class="desc" :data-all="desc">
        {{ localDesc }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  props: {
    labelBold: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: '园区简介',
    },
    desc: {
      type: String,
      default: '园区简介',
    },
    length: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isHover: false,
    }
  },
  computed: {
    localDesc() {
      const { desc, isHover, length } = this
      if (length && desc.length > length && !isHover) {
        return desc.substr(0, length) + '...'
      }
      return desc
    },
  },
})
</script>
<style lang="scss" scoped>
.label-desc-wrapper {
  .label {
    @apply text-[#898faa] text-[14px] mb-[10px] leading-[14px];
  }

  .label-bold {
    @apply text-[#161919] font-semibold;
  }

  .desc-more {
    @apply flex items-end;
    .desc {
      @apply text-[#40445d] mr-[5px] leading-normal;
    }

    .el-icon-more {
      @apply cursor-pointer;
    }
  }
}
</style>
